<template>
	<div class="main app-container">
		<div class="header">
			{{ projectVo.projectName }}
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 项目信息
			</div>
			<div class="info">
				<div class="item">
					<span class="label">项目阶段</span>
					<dict-tag :options="project_stage" :value="projectVo.projectStage" />
				</div>
				<div class="item">
					<span class="label">项目类型</span>
					<dict-tag :options="project_category" :value="projectVo.projectCategory" />
				</div>
				<div class="item">
					<span class="label">项目地址</span>
					{{ projectVo.projectAdress }}
				</div>
				<div class="item">
					<span class="label">联系人</span>
					{{ projectVo.projectContacts }}
				</div>
				<div class="item">
					<span class="label">联系电话</span>
					{{ projectVo.projectMobile }}
				</div>
				<div class="item">
					<span class="label">录入时间</span>
					{{ projectVo.createTime }}
				</div>
				<div class="item">
					<span class="label">修改时间</span>
					{{ projectVo.updateTime }}
				</div>
			</div>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="info">
				<div class="item">
					<span class="label">☆负责人</span>
					<el-tag type="danger" effect="dark">{{ projectVo.createUserCode }}</el-tag>
				</div>
				<div class="item">
					<span class="label">设计</span>
					<div>
						<el-tag v-for="(item, index) in projectStaffVoMap['sj2']" :key="item.sysUserId" type="" effect="dark">{{ item.userName }}</el-tag>
					</div>
				</div>
				<div class="item">
					<span class="label">工程</span>
					<div>
						<el-tag v-for="(item, index) in projectStaffVoMap['gc2']" :key="item.sysUserId" type="" effect="dark">{{ item.userName }}</el-tag>
					</div>
				</div>
				<div class="item">
					<span class="label">采购</span>
					<div>
						<el-tag v-for="(item, index) in projectStaffVoMap['cg2']" :key="item.sysUserId" type="" effect="dark">{{ item.userName }}</el-tag>
					</div>
				</div>
				<div class="item">
					<span class="label">财务</span>
					<div>
						<el-tag v-for="(item, index) in projectStaffVoMap['cw2']" :key="item.sysUserId" type="" effect="dark">{{ item.userName }}</el-tag>
					</div>
				</div>
			</div>
		</div>
		<el-card shadow="hover" class="box-card">
			<template #header>
				<div>
					<span class="box-header">公司基本信息</span>
				</div>
			</template>
			<div class="cai-wu" style="flex-wrap: wrap; align-content: flex-start">
				<div class="cai-item" style="flex: 0 0 20%; display: flex">
					<span class="label">名称</span>
					{{ customerVo.customerName }}
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex">
					<span class="label">地址</span>
					{{ customerVo.customerAdress }}
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex; align-items: center">
					<span class="label">电话</span>
					<span>{{ customerVo.customerMobile }}</span>
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex">
					<span class="label">性质</span>
					{{ customerVo.customerTypeName }}
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex">
					<span class="label">规模</span>
					{{ customerVo.levelName }}
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex">
					<span class="label">户名</span>
					{{ customerVo.financeAccountName }}
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex">
					<span class="label">开户行</span>
					{{ customerVo.financeAccountBlank }}
				</div>
				<div class="cai-item" style="flex: 0 0 20%; display: flex; align-items: center">
					<span class="label">账号</span>
					<span>{{ customerVo.financeAccountNumber }}</span>
				</div>
				<div class="cai-item" style="flex: 0 0 40%; display: flex; align-items: center">
					<span class="label">统一编码</span>
					<span>{{ customerVo.financeUnifiedCode }}</span>
				</div>
			</div>
		</el-card>
		<el-card shadow="hover" class="box-card">
			<template #header>
				<div>
					<span class="box-header">工程进度信息</span>
				</div>
			</template>
			<div class="cai-wu">
				<div class="cai-card">
					<div class="card-left">
						<el-icon size="30px" style="position: relative; top: 10px"><Clock /></el-icon>
					</div>
					<div class="card-right">
						已开工<span style="color: #f66c6c; font-size: 24px; margin: 0 5px">{{ projectVo.workTime }}</span
						>天
					</div>
				</div>
				<div class="cai-card">
					<div class="card-left">
						<el-icon size="30px" style="position: relative; top: 10px"><Clock /></el-icon>
					</div>
					<div class="card-right">
						合同工期<span style="color: #337ab7; font-size: 24px; margin: 0 5px">{{ projectVo.treatyDays }}</span
						>天
					</div>
				</div>
				<div class="cai-card">
					<div class="card-left">
						<el-icon size="30px" color="#F66C6C" style="position: relative; top: 10px"><Bell /></el-icon>
					</div>
					<div class="card-right">
						安全<span style="color: #f66c6c; font-size: 24px; margin: 0 5px">{{ projectVo.progressSecureNumber }}</span
						>起
					</div>
				</div>
				<div class="top-b">
					<div class="top">合同签订日期</div>
					<div class="buttom">{{ projectVo.progressSignTime }}</div>
				</div>
				<div class="top-b">
					<div class="top">合同完工日期</div>
					<div class="buttom">{{ projectVo.progressFinishTime ? projectVo.progressFinishTime : '---' }}</div>
				</div>
				<div class="top-b">
					<div class="top">实际开工日期</div>
					<div class="buttom">{{ projectVo.progressStartTime ? projectVo.progressStartTime : '---' }}</div>
				</div>
				<div class="top-b">
					<div class="top">实际撤场日期</div>
					<div class="buttom">{{ projectVo.progressEndTime ? projectVo.progressEndTime : '---' }}</div>
				</div>
				<div class="top-b">
					<div class="top">验收日期</div>
					<div class="buttom">{{ projectVo.progressCheckTime ? projectVo.progressCheckTime : '---' }}</div>
				</div>
				<div class="top-b">
					<div class="top">审计日期</div>
					<div class="buttom">{{ projectVo.progressAuditTime ? projectVo.progressAuditTime : '---' }}</div>
				</div>
				<div class="top-b">
					<div class="top">尾款到期日期</div>
					<div class="buttom">{{ projectVo.progressCashTime ? projectVo.progressCashTime : '---' }}</div>
				</div>
				<div class="top-b">
					<div class="top">保质到期日期</div>
					<div class="buttom">{{ projectVo.progressWarrantyTime ? projectVo.progressWarrantyTime : '---' }}</div>
				</div>
			</div>
		</el-card>
		<el-card shadow="hover" class="box-card">
			<template #header>
				<div>
					<span class="box-header">企业/项目联系人信息</span>
				</div>
			</template>
			<div style="font-size: 14px">
				<div v-for="(item, index) in projectContactsVos" :key="item.contactsId" class="people-card">
					<div class="people-header">
						<span style="font-size: 16px; font-weight: 600; float: right">{{ item.contactsName }}</span>
					</div>
					<div class="people-item">
						<span class="people-label">手机：</span><el-tag type="danger" effect="dark" style="height: 16px">{{ item.contactsMobile }}</el-tag>
					</div>
					<div class="people-item"><span class="people-label">职位：</span>{{ item.contactsJob }}</div>
					<div class="people-item"><span class="people-label">类型：</span>{{ item.categoryTypeName }}</div>
				</div>
			</div>
		</el-card>
		<el-card class="box-card">
			<template #header>
				<div>
					<span style="font-weight: 600">财务信息</span>
				</div>
			</template>
			<div class="cai-wu">
				<div style="flex: 1">
					<span class="label">合同金额</span>
					{{ projectFinancialVo.totalTreatyMoney }}
					元
				</div>
				<div style="flex: 1">
					<span class="label">审计金额</span>
					{{ projectFinancialVo.totalAuditMoney }}
					元
				</div>
				<div style="flex: 1">
					<span class="label">已开发票</span>
					{{ projectFinancialVo.invoicingMoney }}
					元
				</div>
				<div style="flex: 1">
					<span class="label">到账金额</span>
					{{ projectFinancialVo.received }}
					元
				</div>
			</div>
		</el-card>
		<el-divider style="margin: 15px 0" />
		<div class="content" style="margin-bottom: 50px">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />合同信息
			</div>
			<el-divider style="margin: 15px 0" />
			<BaseTable :columns="columns" :dataList="dataList" noSelection> </BaseTable>
			<div style="margin-top: 5px; font-size: 14px">
				<span style="display: inline-block; float: right; width: 107px">&nbsp;</span>
				<span style="display: inline-block; float: right; width: 90px">{{ projectFinancialVo.invoicingMoney }}元</span>
				<span style="display: inline-block; float: right; width: 90px">{{ projectFinancialVo.received }}元</span>
				<span style="display: inline-block; float: right; width: 90px">{{ allRemainReceived }}元</span>
				<span style="display: inline-block; float: right; width: 90px">{{ projectFinancialVo.totalAuditMoney }}元</span>
				<span style="display: inline-block; float: right; width: 90px">{{ projectFinancialVo.totalTreatyMoney }}元</span>
			</div>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content" style="margin-bottom: 50px">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />项目财务信息
			</div>
			<el-divider style="margin: 15px 0" />
			<div style="display: flex">
				<div style="width: 49.5%; margin-right: 1%">
					<div style="margin-bottom: 5px; font-weight: 600">开票记录</div>
					<BaseTable :columns="columnsp" :dataList="dataListp" noSelection> </BaseTable>
					<div style="height: 25px; line-height: 25px; color: #409eff; text-align: right; font-size: 14px">
						合计金额：{{ projectFinancialVo.invoicingMoney }}0元
					</div>
				</div>
				<div style="width: 49.5%">
					<div style="margin-bottom: 5px; font-weight: 600">收款记录</div>
					<BaseTable :columns="columnsq" :dataList="dataListq" noSelection> </BaseTable>
					<div style="height: 25px; line-height: 25px; color: #409eff; text-align: right; font-size: 14px">
						合计金额：{{ projectFinancialVo.received }}元
					</div>
				</div>
			</div>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content" style="margin-bottom: 50px">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />项目阶段日志
				<span style="float: right">
					<el-button type="primary" @click="searchLog('')">全部信息</el-button>
					<el-button @click="searchLog('1')">商务日志</el-button>
					<el-button @click="searchLog('2')">设计日志</el-button>
					<el-button @click="searchLog('3')">工程日志</el-button>
					<el-button @click="searchLog('')">维保日志</el-button>
					<el-button @click="searchLog('4')">财务日志</el-button>
					<el-button @click="searchLog('5')">招投标日志</el-button>
					<el-button @click="searchLog('')">报价日志</el-button></span
				>
			</div>
			<el-divider style="margin: 15px 0" />
			<BaseTable :columns="columnsr" :dataList="dataListr" noSelection> </BaseTable>
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item style="margin-top: 20px" prop="projectStatus" label="审核状态">
				<el-radio-group v-model="form.projectStatus">
					<el-radio label="1">审核通过</el-radio>
					<el-radio label="2">审核不通过</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="auditNote" label="审核备注">
				<el-input v-model="form.auditNote" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="审核备注" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button @click="reback">返回</el-button>
			<el-button type="primary" @click="submit">提交</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import BaseTable from '@/components/BaseTable'
import { getDetail, queryLog, updateProject } from '@/api/project/project'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const {
	project_plan,
	project_stage,
	project_category,
	project_status,
	collection_status,
	invoicing_status,
	log_type,
	contacts_category,
	contacts_status,
	file_category
} = proxy.useDict(
	'project_plan',
	'project_stage',
	'project_category',
	'project_status',
	'collection_status',
	'invoicing_status',
	'log_type',
	'contacts_category',
	'contacts_status',
	'file_category'
)

const projectVo = ref({})
const projectContactsVos = ref([])
const customerVo = ref({})
const projectFinancialVo = ref({})
const allRemainReceived = ref('')
const projectStaffVoMap = ref({})

const dataList = ref([])
const dataListr = ref([])
const searchLog = (type) => {
	queryLog({ logType: type, projectId: route.query.id }).then((res) => {
		dataListr.value = res.data
	})
}
searchLog()
//开票记录
const dataListp = ref([])
//收款记录
const dataListq = ref([])
if (route.query.id) {
	getDetail(route.query.id).then((res) => {
		allRemainReceived.value = res.data.allRemainReceived
		projectVo.value = res.data.projectVo
		projectContactsVos.value = res.data.projectContactsVos
		customerVo.value = res.data.customerVo
		projectFinancialVo.value = res.data.projectFinancialVo
		projectStaffVoMap.value = res.data.projectStaffVoMap
		dataList.value = res.data.projectTreatyVos
		dataListp.value = res.data.projectTreatyInvoicing
		dataListq.value = res.data.projectTreatyCollection
	})
}

// 列显隐信息
const columns = ref([
	{ key: 0, label: `编号`, width: '150', prop: 'treatyCode', type: 'text', visible: true },
	{ key: 1, label: `名称`, prop: 'treatyName', type: 'text', visible: true },
	{ key: 3, width: '180', label: `日期`, prop: 'treatyTime', type: 'text', visible: true },
	{ key: 4, width: '90', label: `合同金额`, prop: 'treatyTotalMoney', type: 'text', visible: true },
	{ key: 5, width: '90', label: `审计金额`, prop: 'treatyAuditMoney', type: 'text', visible: true },
	{ key: 6, width: '90', label: `应收款`, prop: 'treatyRemainMoney', type: 'text', visible: true },
	{ key: 7, width: '90', label: `已收款`, prop: 'collectionMoney', type: 'text', visible: true },
	{ key: 8, width: '90', label: `已开票`, prop: 'invoicingMoney', type: 'text', visible: true },
	{ key: 9, width: '120', label: `操作`, prop: 'action', type: 'custom', visible: true }
])
//开票记录
const columnsp = ref([
	{ key: 0, label: `合同编号`, width: '150', prop: 'treatyCode', type: 'text', visible: true },
	{ key: 1, label: `发票号码`, prop: 'invoicingCode', type: 'text', visible: true },
	{ key: 2, width: '180', label: `时间`, prop: 'invoicingTime', type: 'text', visible: true },
	{ key: 4, width: '200', label: `合同金额`, prop: 'invoicingMoney', type: 'text', visible: true },
	{ key: 9, width: '90', label: `状态`, prop: 'invoicingStatus', type: 'select', data: invoicing_status, visible: true }
])

//收款记录
const columnsq = ref([
	{ key: 0, label: `合同编号`, width: '150', prop: 'treatyCode', type: 'text', visible: true },
	{ key: 1, label: `账户`, prop: 'collectionAccountName', type: 'text', visible: true },
	{ key: 2, width: '180', label: `时间`, prop: 'collectionTime', type: 'text', visible: true },
	{ key: 4, width: '200', label: `金额`, prop: 'collectionMoney', type: 'text', visible: true },
	{ key: 9, width: '90', label: `状态`, prop: 'collectionStatus', type: 'select', data: collection_status, visible: true }
])

//项目阶段日志
const columnsr = ref([
	{ key: 0, label: `日志类型`, width: '100', prop: 'logType', type: 'select', data: log_type, visible: true },
	{ key: 1, label: `日志标题`, prop: 'logName', type: 'text', visible: true },
	{ key: 2, width: '150', label: `录入时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 3, width: '150', label: `更新时间`, prop: 'updateTime', type: 'dateTime', visible: true },
	{ key: 4, width: '90', label: `发布`, prop: 'createUserCode', type: 'text', visible: true },
	{ key: 6, width: '220', label: `操作`, prop: 'action', type: 'custom', visible: true }
])

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
const form = reactive({
	projectId: route.query.id,
	auditNote: '',
	projectStatus: ''
})
const rules = {
	auditNote: [{ required: true, message: '审核备注不能为空', trigger: 'blur' }],
	projectStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
}
const baseform = ref()
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			if (form.projectStatus == '2') {
				if (projectVo.value.projectStatus == '5') {
					form.projectStatus = '7'
				} else if (projectVo.value.projectStatus == '4') {
					form.projectStatus = '6'
				} else if (projectVo.value.projectStatus == '8') {
					form.projectStatus = '9'
				}
			} else {
				if (projectVo.value.projectStatus == '5') {
					form.projectStage = '5'
					form.projectStatus = '12'
				} else if (projectVo.value.projectStatus == '4') {
					form.projectStage = '4'
					form.projectStatus = '13'
				} else if (projectVo.value.projectStatus == '8') {
					form.projectStatus = '10'
				} else if (projectVo.value.projectStatus == '10') {
					form.projectStage = '3'
					form.projectStatus = '11'
				}
			}
			updateProject(form).then((res) => {
				proxy.$modal.msgSuccess('审核成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		}
	})
}
</script>

<style lang="scss" scoped>
:deep(.el-tag) {
	margin-right: 5px;
}
.main {
	background-color: #ffffff;
	.header {
		font-size: 24px;
		color: black;
		font-weight: 600;
	}
	.content {
		.content-header {
			color: black;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.info {
			display: flex;
			line-height: 40px;
			.item {
				width: 300px;
				font-size: 14px;
				display: flex;
				line-height: 24px;
				font-size: 14px;
				margin-bottom: 5px;

				.label {
					color: #325e8e;
					background-color: #f2f2f1;
					margin-right: 5px;
					height: 24px;
					min-width: 40px;
					padding: 0 5px;
				}
			}
		}
	}
	.box-card {
		background-color: #f9f9f9;
		margin-top: 10px;
		.box-header {
			font-weight: 800;
			font-size: 14px;
		}
		.people-card {
			width: 250px;
			height: 120px;
			border: #dcdfe6 1px solid;
			background-color: #f4f4f6;
			display: inline-block;
			margin-right: 15px;
			.people-header {
				border-bottom: #dcdfe6 1px solid;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
			}
			.people-item {
				padding: 0 10px;
				height: 30px;
				line-height: 30px;
				.people-label {
					font-weight: 600;
				}
			}
		}
		.cai-wu {
			font-size: 14px;
			display: flex;
			justify-content: space-around;
			.label {
				font-weight: 600;
			}
			.cai-item {
				display: inline-block;
				.label {
					font-weight: 600;
					min-width: 40px;
					margin-right: 5px;
				}
			}
			.cai-card {
				display: flex;
				width: 150px;
				height: 60px;
				border: 1px #dcdfe6 solid;
				padding: 5px;
				margin-right: 10px;
				background-color: #ffffff;
				.card-left {
					width: 50px;
					border-right: #dcdfe6 1px solid;
					text-align: center;
				}
				.card-right {
					width: 100px;
					text-align: center;
					line-height: 50px;
					font-size: 12px;
				}
			}
			.top-b {
				width: 100px;
				height: 60px;
				border: #dcdfe6 1px solid;
				padding: 5px;
				margin-right: 10px;
				background-color: #ffffff;
				.top {
					font-weight: 600;
					text-align: center;
					height: 25px;
					line-height: 25px;
					border-bottom: 1px #dcdfe6 solid;
				}
				.buttom {
					text-align: center;
					height: 25px;
					line-height: 25px;
				}
			}
		}
	}
}
</style>
